<template>
  <div class="personal">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <div class="mui-content">
          <div class="header-panel">
            <div class="row-1">
              <div class="user-info">
                <img  class="user-icon" :src="getAvatar"/>
                <div class="user-text">
                  <span>{{getUserType}}</span>
                  <span class="user-name" v-tap="{method:goLogin}">{{userInfo.nickname||userInfo.realname||userInfo.username||'点击登录'}}</span>
                </div>
              </div>
              <div class="user-tool">
                <span class="mui-icon mui-icon-gear" v-tap="{method:toSetup}"></span>
              </div>
            </div>
          </div>
          <div class="header-menu">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
              <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-tap="{method:memberCenter}">
                <a>
                  <svg class="mui-icon icon" aria-hidden="true">
                    <use xlink:href="#icon-huiyuanzhongxin"></use>
                  </svg>
                  <div class="mui-media-body">账户中心</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-if="false">
                <router-link to="/test">
                  <svg class="mui-icon icon" aria-hidden="true">
                    <use xlink:href="#icon-huiyuanzhongxin"></use>
                  </svg>
                  <div class="mui-media-body">意见反馈</div>
                </router-link>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-if="false">
                <a>
                  <svg class="mui-icon icon" aria-hidden="true">
                    <use xlink:href="#icon-huiyuanzhongxin"></use>
                  </svg>
                  <div class="mui-media-body">在线客服</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-if="false">
                <a>
                  <svg class="mui-icon icon" aria-hidden="true">
                    <use xlink:href="#icon-huiyuanzhongxin"></use>
                  </svg>
                  <div class="mui-media-body">地址管理</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      data(){
        return{
          avatarMan:'',
          avatarWoman:'',
          userInfo:{},
          token:null,
          islogin:false,
        }
      },
      created(){
        var that = this;
        that.token = that.$cookie.get('token');
        that.userInfo = that.$store.state.user.userInfo;
        that.avatarMan=that.$store.state.user.avatarMan;
        that.avatarWoman=that.$store.state.user.avatarWoman;
        that.goLogin();
      },
      mounted(){
        mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005
        });
      },
      computed:{
        getUserType(){
          var that = this;
          var userType='游客';
          if(that.userInfo && that.userInfo.user_level_id){
            switch (that.userInfo.user_level_id){
              case 1:
              case '1':
                userType='消费者';
                break;
              case 2:
              case '2':
                userType='笑笑商家';
                break;
              case 3:
              case '3':
                userType='笑笑宝';
                break;
              default:
                userType='游客';
            }
          }
          return userType;
        },
        getAvatar(){
          var that = this;
          var avatar= that.userInfo.avatar?that.userInfo.avatar:(that.userInfo.gender==0?that.avatarWoman:that.avatarMan);
          return avatar;
        }
      },
      methods:{
        toPage(path){
          //v-tap="{method:toPage,params:'/test'}"
          this.$router.push(path);
        },
        goLogin(){
          var that = this;
          if(!that.islogin){
            that.$http({url: that.$http.adornUrl(that.$api.ShopUser),method:'get',params:that.$http.adornParams()})
              .then(function(res){
                if(res.errno==0){
                  that.$store.commit('user/updateUserInfo',res.data);
                  that.userInfo = that.$store.state.user.userInfo;
                  that.islogin=true;
                }
              })
              .catch(function (err) {
                console.log("错误提示:",err);
              })
          }
        },
        memberCenter(){
          var that = this;
          that.$http({url: that.$http.adornUrl(that.$api.ShopUser),method:'get',params:that.$http.adornParams()})
            .then(function(res){
              if(res.errno==0){
                if(res.data.user_level_id == null || res.data.user_level_id == ''){
                  mui.confirm('去认证','提示',['取消','确认'],function(e){
                    if(e.index==1){
                      that.$router.push("/certification");
                    }
                  });
                }else if(res.data.user_level_id >=100){
                  mui.confirm('认证失败请重新认证','提示',['取消','确认'],function(e){
                    if(e.index==1){
                      that.$router.push("/certification");
                    }
                  });
                }else if(res.data.user_level_id >=10){
                  mui.alert('认证中...','提示','确定');
                }else{
                  that.$router.push("/member");
                }
              }
            })
            .catch(function (err) {
              console.log("错误提示:",err);
            })
        },
        toSetup(){
          var that = this;
          if(that.islogin){
            that.$router.push("/setup");
          }else{
            mui.toast("请先登录")
          }
        }
      },
    }
</script>

<style scoped lang="less">
.personal{
  font-family: PingFang-SC-Regular;
  .header-panel{
    padding:0 0.3rem;
    background-color: #3a8dff;
    color:#fff;
    height: 2.5rem;
    .row-1{
      padding-top:0.3rem;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      .user-info{
        display:flex;
        align-items:center;
        .user-icon{
          width:1.2rem;
          height:1.2rem;
          border-radius: 0.6rem;
        }
        .user-text{
          display:flex;
          flex-direction:column;
          padding-left:0.2rem;
          font-size:0.26rem;
          .user-name{
            font-size:0.32rem;
          }
        }
      }
      .user-tool{
        .mui-icon{
          font-size: 0.48rem;
        }
      }
    }
  }
  .header-menu{
    position:relative;
    top:-0.4rem;
    margin: 0 0.25rem;
    border-radius:0.3rem;
    overflow: hidden;
    .mui-grid-view.mui-grid-9{
      background-color: #fff;
      border-top: 0;
      border-left: 0;
      .mui-table-view-cell{
        padding: 0 0.3rem;
        border-right: 0;
        border-bottom: 0;
        .mui-media-body{
          font-size: 0.2rem;
        }
      }
      .mui-media{
        .mui-icon{
          font-size: 0.7rem;
        }
      }
    }
  }
}
</style>
